<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <button id="clickMe">Click Me</button> -->

    <input type="button" id="btn" onclick="fun(2)" value="你好呀">
    <script>
        /*
            事件模型 1、事件与事件流  2、原始事件模型 3、标准事件模型 4、IE事件模型(基本不用)
        **/ 
        // 事件流 1、捕获阶段(capture) 2、目标阶段(target) 3、冒泡阶段(bubbling)
        var button = document.getElementById('clickMe');
        button.onclick = function() {
        console.log('1.Button');
        };
        document.body.onclick = function() {
        console.log('2.body');
        };
        document.onclick = function() {
        console.log('3.document');
        };
        window.onclick = function() {
        console.log('4.window');
        }

        // 原始事件模型 

        // 2、通过 JS 代码绑定
        // var btn = document.getElementById('btn')
        // btn.onclick = ()=>{
        //     console.log('点击1');
        // }

        // 1、HTML代码中直接绑定
        function fun(v){
            console.log(`点击2+${v}`);
        }


        // 标准事件模型 事件捕获阶段，事件处理阶段，事件冒泡阶段

        // 可以在一个DOM元素上绑定多个事件处理器，各自不冲突

    </script>
</body>
</html>